<template>
  <div>
    <div class="messageService">
      <Tabs :option="tabsOption" @change="tabsChange" />
      <div v-for="(item,index) in tabsOption.column" v-show="tabsType.prop===index" :key="index">
        <div v-if="tabsType.tabsCon1">
          <SimpleData :simple-data="simpleData" :option="msgOption" />
        </div>
      </div>
      <el-row class="mgt20">
        <el-col :span="8" class="txt-center"><el-button type="primary" class="btn btn-primary">变更</el-button></el-col>
        <el-col :span="8" class="txt-center"><el-button type="primary" class="btn btn-primary">关闭</el-button></el-col>
        <el-col :span="8" class="txt-center"><el-button type="primary" class="btn btn-primary">一键关闭</el-button></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import InformationShow from '@/components/common/informationShow'
import ChildDropDown from '@/components/common/DropDownLoad'
import Tabs from '@/components/common/Tabs'
import SimpleData from '@/components/common/SimpleData'
import { queryLoss } from '@/api/bankBiz/loss/loss'
export default {
  name: 'MessageService',
  components: {
    Tabs,
    SimpleData
  },
  data() {
    return {
      tabsType: {},
      tabsOption: {
        column: [{
          label: '短信银行业务',
          prop: 0,
          tabsCon1: true
        }]
      },
      personalCustInfoData: {},
      custInfoFlag: true,
      simpleData: {
        'no': '卡/账号',
        'status': '签约状态',
        'type': '签约类型',
        'phone': '签约手机号',
        'date': '签约日期',
        'validity': '签约有效期',
        'chargePolicy': '收费政策'
      },
      msgOption: {
        column: [
          {
            'prop': 'no',
            'label': '卡/账号',
            'span': 8
          },
          {
            'prop': 'status',
            'label': '签约状态',
            'span': 8
          },
          {
            'prop': 'type',
            'label': '签约类型',
            'span': 8
          },
          {
            'prop': 'phone',
            'label': '签约手机号',
            'span': 8
          },
          {
            'prop': 'date',
            'label': '签约日期',
            'span': 8
          },
          {
            'prop': 'validity',
            'label': '签约有效期',
            'span': 8
          },
          {
            'prop': 'chargePolicy',
            'label': '收费政策',
            'span': 8
          }
        ]
      },
      dropDownLoadArray: [],
      checkListIsShow: false
    }
  },
  created() {
    // tab option
    this.tabsType = this.tabsOption.column[0]
    this.msgSearch()
  },
  methods: {
    tabsChange(column) {
      this.tabsType = column
      this.$message.success(JSON.stringify(column))
    },
    msgSearch() {
      return
      // 调接口
      const msgParams = {
        namespace: 'Personal',
        key: 'messageService'
      }
      queryLoss(msgParams).then((res) => {
        this.simpleData = res.data.data
      })
    }
  }
}
</script>

<style scoped>
  .mgt20{margin-top: 20px;}
</style>
